<template>
  <div>
    <LevelBg>
      <template #levelBg>
        <img class="hs" src="../assets/fivehs.png" alt />
      </template>
      <template #num>第五关</template>
      <template #title>举一反三</template>
      <template #key>
        辛勤付出合理回报，工作与生活更加<span style="color:rgb(252, 255, 0);">契</span>合
      </template>
      <template #desc><span style="fontSize:10px">30秒内完成福利社所有配对，你获得的比你所想的更多</span></template>
      <template #btn>
        <img @click="start" src="../assets/sBtn.png" style="height:38px;width:137px;" />
      </template>
    </LevelBg>
    <img class="star" :class="{starmove:move}" src="../assets/star.png" />
    <img class="f1" src="../assets/finish.png" />
    <img class="f1 f2" src="../assets/finish.png" />
    <img class="f1 f3" src="../assets/finish.png" />
    <img class="f1 f4" src="../assets/finish.png" />
  </div>
</template>


<script>
export default {
  data() {
    return {
      move: false
    };
  },
  methods: {
    start() {
      this.move = true;
    },
    goNext() {
      this.$router.push("m5");
    }
  },
  mounted() {
    addEventListener("animationend", this.goNext);
  }
};
</script>

<style scoped>
.hs {
  position: absolute;
  width: 125px;
  height: 85px;
  left: 18px;
  top: 12px;
}
.star {
  width: 26px;
  height: 24px;
  position: absolute;
  top: 325px;
  left: 252px;
}
@keyframes starMove {
  0% {
    top: 325px;
  }
  12.5% {
    top: 315px;
  }
  25% {
    top: 325px;
  }
  37.5% {
    top: 335px;
  }
  50% {
    top: 325px;
  }
  67.5% {
    top: 315px;
  }
  75% {
    top: 325px;
  }
  87.5% {
    top: 335px;
  }
  100% {
    top: 325px;
  }
}
.starmove {
  animation: starMove 3s linear;
}
.f1 {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 340px;
  left: 35px;
}
.f2 {
  top: 360px;
  left: 100px;
}
.f3 {
  top: 390px;
  left: 160px;
}
.f4 {
  top: 335px;
  left: 220px;
}
</style>
